<!DOCTYPE  html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,  initial-scale=1.0">
    <title>被蠕虫盯上了</title>
</head>
<script>
  function  moveFunc(e)  {
    let  box  =  document.querySelector("#Eye_Group_L");
    let  rightBox  =  document.querySelector("#Eye_Group_R");
    let  boxBoundingRect  =  box.getBoundingClientRect();
    let  boxCenter  =  {
      x:  boxBoundingRect.left  +  boxBoundingRect.width  /  2,
      y:  boxBoundingRect.top  +  boxBoundingRect.height  /  2
    };
    let  angle  =
            Math.atan2(e.pageX  -  boxCenter.x,  -(e.pageY  -  boxCenter.y))  *
            (180  /  Math.PI);
    box.style.transform  =  `rotate(${angle  +  60}deg)`;
    rightBox.style.transform  =  box.style.transform;
  }

  window.scrollTo({
    right:  0,
    top:  document.body.scrollHeight,
    behavior:  "smooth"
  });
</script>

<style>
  body  {
    background-color:  rgb(36,  89,  28);
    background:  linear-gradient(0deg,
    rgba(36,  89,  28,  1)  0%,
    rgba(36,  89,  28,  1)  36%,
    rgba(255,  255,  255,  1)  36%,
    rgba(255,  255,  255,  1)  100%);
    height:  100vh;
    overflow:  hidden;
    display:  flex;
    justify-content:  center;
    align-items:  flex-end;
  }

  .innerGroup  {
    transform-box:  fill-box;
    transform-origin:  center;
  }

  .eye_group  {
    transform-box:  fill-box;
    transform-origin:  50%  65%;
    animation:  blinkAnim  3000ms  linear  infinite;
  }

  .innerGroup  rect:first-of-type  {
    animation:  blackAnim  3000ms  linear  infinite;
  }

  #Smile  {
    transform-box:  fill-box;
    transform-origin:  center;
    animation:  smileAnim  3000ms  linear  infinite;
  }

  @keyframes  smileAnim  {
    0%  {
      transform:  translateY(0);
    }
    88%  {
      transform:  translateY(0);
    }
    90%  {
      transform:  translateY(5%);
    }
    95%  {
      transform:  translateY(-10%);
    }
    100%  {
      transform:  translateY(0);
    }
  }

  @keyframes  blinkAnim  {
    0%  {
      transform:  scaleY(1);
    }
    88%  {
      transform:  scaleY(1);
    }
    90%  {
      transform:  scaleY(1.1);
    }
    93%  {
      transform:  scaleY(0.05);
    }
    97%  {
      transform:  scaleY(0.05);
    }
    100%  {
      transform:  scaleY(1);
    }
  }

  @keyframes  blackAnim  {
    0%  {
      fill:  white;
    }
    90%  {
      fill:  white;
    }
    93%  {
      fill:  #424242;
    }
    97%  {
      fill:  #424242;
    }
    100%  {
      fill:  white;
    }
  }

  @media  only  screen  and  (max-width:  600px)  {
    svg  {
      transform:  scale(1.1);
    }
  }
</style>
<body>
<svg width="100vw" height="100vh" viewBox="0  0  332  332" fill="none" xmlns="http://www.w3.org/2000/svg"
     onmousemove="moveFunc(event);" ontouchmove="moveFunc(event);">
    <g id="Worm_Frame">
        <rect id="Grass" y="215" width="332" height="117" fill="#24591C"/>
        <ellipse id="Hole" cx="165.5" cy="276.5" rx="75.5" ry="24.5" fill="#193E13"/>
        <path id="Worm\" fill-rule="evenodd" clip-rule="evenodd"
              d="M217  294.416C203.511  298.5  185.405  301  165.5  301C146.083  301  128.377  298.621  115  294.713L115  80C115  51.8335  137.833  29  166  29C194.167  29  217  51.8335  217  80V294.416Z"
              fill="#F4BCAB"/>
        <path id="Smile"
              d="M177  122.5C177  125.55  175.788  128.475  173.632  130.632C171.475  132.788  168.55  134  165.5  134C162.45  134  159.525  132.788  157.368  130.632C155.212  128.475  154  125.55  154  122.5"
              stroke="#424242" stroke-width="4" stroke-linecap="round"/>
        <g class="eye_group">
            <g id="Eye_Group_L" class="innerGroup">
                <rect id="Eye_L" x="126" y="80" width="36" height="36" rx="18" fill="white"/>
                <rect id="pupil_L" x="128" y="86" width="14" height="14" rx="7" fill="#424242"/>
            </g>
        </g>
        <g class="eye_group">
            <g id="Eye_Group_R" class="innerGroup">
                <rect id="Eye_R" x="170" y="80" width="36" height="36" rx="18" fill="white"/>
                <rect id="Pupil_R" x="172" y="86" width="14" height="14" rx="7" fill="#424242"/>
            </g>
        </g>
        <g id="decorations" clip-path="url(#clip0_0_3)">
            <path id="Ellipse  4"
                  d="M219  149C219  150.498  218.1  152.323  215.573  154.319C213.065  156.301  209.257  158.195  204.269  159.827C199.301  161.453  193.36  162.756  186.779  163.648C180.201  164.54  173.139  165  166  165C158.861  165  151.799  164.54  145.221  163.648C138.64  162.756  132.699  161.453  127.731  159.827C122.743  158.195  118.935  156.301  116.427  154.319C113.9  152.323  113  150.498  113  149"
                  stroke="#EE9D84" stroke-width="4" stroke-linecap="round"/>
            <path id="Ellipse  5"
                  d="M219  203C219  204.498  218.1  206.323  215.573  208.319C213.065  210.301  209.257  212.195  204.269  213.827C199.301  215.453  193.36  216.756  186.779  217.648C180.201  218.54  173.139  219  166  219C158.861  219  151.799  218.54  145.221  217.648C138.64  216.756  132.699  215.453  127.731  213.827C122.743  212.195  118.935  210.301  116.427  208.319C113.9  206.323  113  204.498  113  203"
                  stroke="#EE9D84" stroke-width="4" stroke-linecap="round"/>
            <path id="Ellipse  6"
                  d="M219  257C219  258.498  218.1  260.323  215.573  262.319C213.065  264.301  209.257  266.195  204.269  267.827C199.301  269.453  193.36  270.756  186.779  271.648C180.201  272.54  173.139  273  166  273C158.861  273  151.799  272.54  145.221  271.648C138.64  270.756  132.699  269.453  127.731  267.827C122.743  266.195  118.935  264.301  116.427  262.319C113.9  260.323  113  258.498  113  257"
                  stroke="#EE9D84" stroke-width="4" stroke-linecap="round"/>
        </g>
    </g>
    <defs>
        <clipPath id="clip0_0_3">
            <rect width="102" height="144" fill="white" transform="translate(115  131)"/>
        </clipPath>
    </defs>
</svg>
</body>


</html>
